<template>
	<view class="container flex flex-direction">
		<zx-nav title="推广金转化" color="#fff"></zx-nav>
		<view class="info">
			<view class="title">当前推广金</view>
			<view class="num">{{ freshbean }}</view>
			<navigator class="description" url="/pages/article/details?id=8">规则说明</navigator>
		</view>
		<view class="content flex-sub">
			<view class="subtitle">请选择需要转化的推广金数量</view>
			<view class="numberbox">
				<NumberboxBig :width="width" :iconSize="70" :step="1000" :value="num" :max="freshbean" :isdisabled="true" @change="changeNum"></NumberboxBig>
			</view>
			<view class="tip">* 推广金转化实时到账，每次转化必须为1000的倍数。</view>
			<view class="action u-primary">* 到账金额{{ realMoney }}元，可在余额里查看</view>
			<view class="footerbar"><u-button @click="exchangeMoney" shape="circle" :disabled="!freshbean" type="success">确定转化为余额</u-button></view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import NumberboxBig from './components/numberboxBig.vue';
export default {
	data() {
		return {
			num: 1000,
			width: '100%'
		};
	},
	components: {
		NumberboxBig
	},
	computed: {
		...mapState(['userInfo']),
		realMoney() {
			return (parseFloat(this.userInfo.fresh_bean_exchange) / 100) * parseInt(this.num);
		},
		freshbean() {
			return this.userInfo.fresh_bean || 0;
		}
	},

	methods: {
		...mapMutations(['uploadUserInfo']),
		changeNum(e) {
			this.num = e.value;
			console.log(JSON.stringify(e));
		},
		exchangeMoney() {
			if (this.num == null || !this.num) {
				uni.showToast({
					title: '转化的推广金数量不能为0',
					icon: 'none'
				});
				return false;
			} else if (this.num > this.freshbean) {
				uni.showToast({
					title: '转化的推广金量不能大于当前推广金',
					icon: 'none'
				});
				return false;
			}
			var param = {
				fresh_bean: this.num
			};
			this.$postAction(this.$api.exchangeMoney, param).then(da => {
				if (da.code == 0) {
					console.log(JSON.stringify(da));
					uni.showToast({
						title: da.msg,
						icon: 'success'
					});
					this.userInfo.fresh_bean = this.freshbean - this.num;
					this.uploadUserInfo(this.userInfo);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 200);
				} else {
					uni.showToast({
						title: da.msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	// overflow: hidden;
	position: relative;
	background: linear-gradient(180deg, #ff8173 0%, #ff3543 100%);
	.info {
		text-align: center;
		padding: 43upx 0 50upx;
		font-size: 30upx;
		color: #fff;
		position: relative;
		.title {
			font-size: 26upx;
		}

		.num {
			margin-top: 10upx;
			color: #fff;
			font-size: 60upx;
			font-weight: bold;
			line-height: 84upx;
		}

		.description {
			position: absolute;
			top: 20upx;
			right: 28upx;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 30upx;
			font-size: 22upx;
			color: #ff3c47;
			padding: 8upx 18upx;
		}
	}
	.content {
		padding: 50upx 28upx;
		background: #fff;
		border-radius: 48upx 48upx 0px 0px;
		font-size: 26upx;
		.subtitle {
			color: #1c1c1e;
			font-size: 28upx;
			font-weight: bold;
		}
		.numberbox {
			margin: 83upx 72upx 67upx;
		}
		.tip {
			color: #636366;
			margin-bottom: 12upx;
		}
	}
	.footerbar {
		margin: 66upx;
	}
}
</style>
